<template>
  <div class="work-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button icon="el-icon-arrow-left" @click="$router.back()">返回</el-button>
    </div>

    <!-- 作品标题 -->
    <h2 class="work-title">{{ workTitle }}</h2>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 空数据状态 -->
    <el-empty
      v-else-if="!workList.length"
      description="暂无相关图片"
    ></el-empty>

    <!-- 分类展示 -->
    <template v-else>
      <!-- 效果图部分 -->
      <div v-if="effectList.length" class="work-section">
        <h3>效果图</h3>
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in effectList" :key="item.workName">
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <img 
                :src="item.workUrl" 
                class="work-image"
                @click="previewImage(item.workUrl)"
              >
              <div style="padding: 14px;">
                <h4>{{ item.workName }}</h4>
                <p v-if="item.workDesc">{{ item.workDesc }}</p>
                <div class="work-footer">
                  <span class="time">{{ item.createTime }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 施工图部分 -->
      <div v-if="constructList.length" class="work-section">
        <h3>施工图</h3>
        <el-table :data="constructList" style="width: 100%">
          <el-table-column prop="workName" label="文件名称"></el-table-column>
          <el-table-column prop="createTime" label="上传时间" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button 
                type="text" 
                @click="downloadFile(scope.row.workUrl, scope.row.workName)"
              >
                下载
              </el-button>
              <el-button 
                type="text" 
                @click="previewPdf(scope.row.workUrl)"
              >
                预览
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
  </div>
</template>

<script>
import { getWorkListByMngId } from '@/api/works'

export default {
  name: 'WorkDetail',
  data() {
    return {
      loading: false,
      workList: [],
      workTitle: '',
      mngId: this.$route.query.mngId
    }
  },
  computed: {
    effectList() {
      return this.workList.filter(item => item.workType === '2')
    },
    constructList() {
      return this.workList.filter(item => item.workType === '1')
    }
  },
  created() {
    if (this.mngId) {
      this.getWorkList()
      this.workTitle = this.$route.query.title || '作品详情'
    }
  },
  methods: {
    async getWorkList() {
      this.loading = true
      try {
        const res = await getWorkListByMngId(this.mngId)
        if (res.code === 200) {
          this.workList = res.rows
        } else {
          this.$message.error('获取作品详情失败')
        }
      } catch (error) {
        console.error('获取作品详情失败:', error)
        this.$message.error('获取作品详情失败')
      } finally {
        this.loading = false
      }
    },
    previewImage(url) {
      // 使用 el-image-viewer 预览图片
      const h = this.$createElement
      const imageViewer = h('el-image', {
        props: {
          src: url,
          previewSrcList: [url]
        }
      })
      this.$msgbox({
        title: '图片预览',
        message: imageViewer,
        showConfirmButton: false,
        customClass: 'image-preview-dialog'
      })
    },
    previewPdf(url) {
      window.open(url)
    },
    downloadFile(url, fileName) {
      const link = document.createElement('a')
      link.href = url
      link.download = fileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

<style scoped>
.work-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.back-button {
  margin-bottom: 20px;
}

.work-title {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}

.work-section {
  margin-bottom: 40px;
}

.work-section h3 {
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.work-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.work-image:hover {
  transform: scale(1.02);
}

.work-footer {
  margin-top: 10px;
  color: #909399;
  font-size: 13px;
}

.loading-container {
  padding: 40px;
}

:deep(.image-preview-dialog) {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-message-box__message) {
  text-align: center;
}
</style> 